{% extends '__base__.html' %}

{% block title %}test JavaScript{% endblock %}

{% block beforehead %}

<script>
'use strict'; // 强制通过var声明变量, 防止变量在未声明时变成全局变量
// JavaScript
// alert(Math.abs(1/3 - (1 - 2/3)) < 0.0000001);
`01.字符串`;
// var abc = `多行
// 字符
// 串`;
// var age = 20;
// var message = `你好, ${abc}, 你今年 ${age}岁了!`;
// console.log("长度:",message.length);
// console.log(message);
// console.log(message[0]);
// console.log(message[1]);
// console.log(message[99]);
// console.log(message.substring(9, 12));
// console.log(message.substring(9));
// console.log(message.indexOf("串"));
// console.log(message.indexOf("哈哈"));
`02.数组`;
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy1 = arr; // 改变arr, 会改变到arrCopy1
var aCopy2 = arr.slice(); // 复制一个数组.  改变arr, 不会会改变到arrCopy2
console.log(arr);
console.log(arr.length);
arr.length = 3; //直接给Array的length赋一个新的值会导致Array大小的变化
console.log(arr);
console.log(aCopy1);
console.log(aCopy2);
console.log(arr.slice(3, 4));
// push, pop
arr.push('H', 'I'); //数组后面 添加元素
console.log(arr);
arr.pop(); //删掉最后一个
console.log(arr);
// unshift, shift
arr.unshift('0', 1); // 数组前面添加 元素
console.log(arr);
arr.shift(); // 数组前面删除一个
console.log(arr);
// sort, reverse
arr.sort(); //排序
console.log(arr);
arr.reverse(); // 反转
console.log(arr);
// splice
arr.splice(2, 2, 'J', 'K'); // 2: 要开始的位置, 2要删除的元素个数, 后面是要添加的元素
console.log(arr);
// concat
var arradd = arr.concat(aCopy2); // 合并两个数组
console.log(arradd);
// join
console.log(arr.join('_'));
arr = [[1, 2, 3], [400, 500, 600], '-'];
console.log(arr);
var x = arr[1][1];
console.log(x);
arr = ['小明', '小红', '大军', '阿黄'];
var s1 = arr.slice(0, arr.length-1).join(',');
var s2 = arr[arr.length-1];
console.log(`欢迎${s1}和${s2}同学`);

// 对象
var xiaoming = {
    name: '小明'
};
xiaoming.age = 15;
xiaoming.birth = '1990.06.30';
console.log(xiaoming);
console.log('birth' in xiaoming);
delete xiaoming.birth;
console.log(xiaoming);
console.log('birth' in xiaoming);
// hasOwnProperty
console.log('toString' in xiaoming); // toString 是从object对象继承来的 所以是true
console.log(xiaoming.hasOwnProperty('name')); // 判断是自身属性, 还是继承的属性
console.log(xiaoming.hasOwnProperty('toString')); 

// Map, Set
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
var s = new Set([1,2, '3']); // 保存不重复的key
console.log('Map, Set')
console.log(m.get('Michael'));
console.log(m.set('Michael', 99));
console.log(m.get('Michael'));
console.log(m.delete('Michael'));
console.log(m.get('Michael'));
console.log(m.has('Michael'));

console.log(s);
s.add(4);
console.log(s);
s.delete(2);
console.log(s);

// iterable
var a = [1, 2, 3];
a.name = 'hello';
for (var i of a){
	console.log(i); // 遍历数组还是要用 for...of
}
for (var i in a){
	console.log(i); // 
}

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(set);
});

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.forEach(function (e) {
    console.log(e);
});
</script>

{% endblock %}

{% block content %}

  <div class="uk-panel uk-panel-box" style="width: 50;position:relative;"> 
   <h3 class="uk-panel-title">侧边栏</h3> 
   <ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav=""> 
    <li class="uk-active"><a href="#">Active</a></li> 
    <li class="uk-parent uk-open" aria-expanded="true"> <a href="#">Parent</a> 
     <div style="overflow: hidden; position: relative;" class="">
      <ul class="uk-nav-sub"> 
       <li><a href="#">Sub item</a></li> 
       <li><a href="#">Sub item</a> 
        <ul> 
         <li><a href="#">Sub item</a></li> 
         <li><a href="#">Sub item</a></li> 
        </ul> </li> 
      </ul>
     </div> </li> 
    <li class="uk-parent" aria-expanded="false"> <a href="#">Parent</a> 
     <div style="overflow:hidden;height:0;position:relative;" class="uk-hidden">
      <ul class="uk-nav-sub"> 
       <li><a href="#">Sub item</a></li> 
       <li><a href="#">Sub item</a></li> 
      </ul>
     </div> </li> 
    <li><a href="#">Item</a></li> 
    <li class="uk-nav-header">Header</li> 
    <li class="uk-parent"><a href="#"><i class="uk-icon-star"></i> Parent</a></li> 
    <li><a href="#"><i class="uk-icon-twitter"></i> Item</a></li> 
    <li class="uk-nav-divider"></li> 
    <li><a href="#"><i class="uk-icon-rss"></i> Item</a></li> 
   </ul> 
  </div>
{% endblock %}